package myJs.cultivars.silico

import myJs.api.Api
import myJs.cps.Style
import myJs.myPkg.plotly._
import org.scalajs.dom.html.Div
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.useEffect
import slinky.web.html._
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._
import slinky.core.facade.React


/**
 * Created by yz on 3/11/2020
 */
@react object HeatmapCp {

  case class Props()

  val component = FunctionalComponent[Props] { props =>

    val divRef = React.createRef[Div]

    object FTool {

      def refreshSvg = {
        Api.heatmapData("silicoDArT.xlsx").map { response =>
          val plotDatas = List(
            Heatmap(
              x = response.x,
              y = response.y,
              z = response.z,
              colorscale = List(
                List("0", "red"),
                List("0.5", "yellow"),
                List("1", "green"),
              )
            )
          )
          val config = Config(
            displayModeBar = false,
          )
          val layout = Layout(
            hovermode = HoverMode.closest,
            width = 2000,
            height = 2000,
            margin = Margin(b = 20, t = 80, l = 80, r = 0),
            xaxis = Axis(
              tickangle = -45,
              side = "top",
              fixedrange = true
            ),
            yaxis = Axis(
              tickangle = -45,
              fixedrange = true
            ),
          )
          Plotly.newPlot(divRef.current, plotDatas, layout = layout, config = config)
        }
      }
    }

    useEffect(() => {
      FTool.refreshSvg
    }, List()
    )

    div(style := Style(width = "100%", height = 900, overflow = "auto"),
      div(className := "mySvg", ref := divRef)

    )


  }

}
